<el-table
  :data="pageContents"
  border
  ref="multipleTable"
  style="width: 100%;"
  :max-height="tableMaxHeight"
  size="medium"
  row-key="id"
  stripe
  :row-class-name="tableRowClassName"
  v-on:header-dragend="handleHeaderDragend"
  v-on:row-dblclick="btnEditClick"
  v-on:selection-change="handleSelectionChange"
  v-on:row-click="toggleSelection">
  <el-table-column type="expand" width="25" align="right">
    <template slot-scope="scope">
      <el-form size="mini" label-position="left" inline class="table-expand-form">
        <el-form-item
          v-for="column in columns"
          :key="column.attributeName"
          v-if="column.attributeName !== 'Title'"
          :label="column.displayName">
          
          <!-- ChannelId -->
          <template v-if="column.attributeName === 'ChannelId'">
            {{scope.row.channelName}}
          </template>

          <!-- GroupNames -->
          <template v-else-if="column.attributeName === 'GroupNames'">
            <template v-if="scope.row.groupNames && groupNames" v-for="groupName in scope.row.groupNames">
              <el-tag v-if="groupNames.indexOf(groupName) !== -1" :key="groupName" size="mini" type="info">
                {{ groupName }}
              </el-tag>
            </template>
          </template>

          <!-- TagNames -->
          <template v-else-if="column.attributeName === 'TagNames'">
            <template v-if="scope.row.tagNames && tagNames" v-for="tagName in scope.row.tagNames">
              <el-tag v-if="tagNames.indexOf(tagName) !== -1" :key="tagName" size="mini" type="info">
                {{ tagName }}
              </el-tag>
            </template>
          </template>

          <!-- ImageUrl -->
          <template v-else-if="column.attributeName === 'ImageUrl'">
            <el-link :underline="false" :href="scope.row.imageUrl" target="_blank" v-on:click.stop.native>
              <el-image v-if="scope.row.imageUrl"  :src="scope.row.imageUrl" style="max-width: 100px; max-height: 100px"></el-image>
            </el-link>
          </template>

          <!-- LinkUrl -->
          <template v-else-if="column.attributeName === 'LinkUrl'">
            <el-link v-if="scope.row.linkUrl" :underline="false" type="primary" :href="scope.row.linkUrl" target="_blank" v-on:click.stop.native>{{scope.row.linkUrl}}</el-link>
          </template>

          <!-- AdminId -->
          <template v-else-if="column.attributeName === 'AdminId'">
            <el-link v-if="scope.row.adminId" :underline="false" type="primary" v-on:click.stop.native="btnAdminClick(scope.row.adminId)">{{scope.row.adminName}}</el-link>
          </template>

          <!-- LastEditAdminId -->
          <template v-else-if="column.attributeName === 'LastEditAdminId'">
            <el-link v-if="scope.row.lastEditAdminId" :underline="false" type="primary" v-on:click.stop.native="btnAdminClick(scope.row.lastEditAdminId)">{{scope.row.lastEditAdminName}}</el-link>
          </template>

          <!-- UserId -->
          <template v-else-if="column.attributeName === 'UserId'">
            <el-link v-if="scope.row.userId" :underline="false" type="primary" v-on:click.stop.native="btnUserClick(scope.row.userId)">{{scope.row.userName}}</el-link>
          </template>

          <!-- CheckAdminId -->
          <template v-else-if="column.attributeName === 'CheckAdminId'">
            <el-link v-if="scope.row.checkAdminId" :underline="false" type="primary" v-on:click.stop.native="btnAdminClick(scope.row.checkAdminId)">{{scope.row.checkAdminName}}</el-link>
          </template>

          <!-- SourceId -->
          <template v-else-if="column.attributeName === 'SourceId'">
            {{scope.row.sourceName}}
          </template>

          <!-- Others -->
          <template v-else>
            <span v-html="scope.row.getEntityValue(column.attributeName)"></span>
          </template>

        </el-form-item>
      </el-form>
    </template>
  </el-table-column>
  <el-table-column type="selection" width="45" align="center"></el-table-column>

  <el-table-column
    :label="titleColumn.displayName"
    :column-key="titleColumn.attributeName"
    :min-width="titleColumn.width"
    show-overflow-tooltip
    resizable>
    <template slot-scope="scope">
      <el-link v-if="scope.row.checked && scope.row.channelId > 0" type="primary" :underline="false" :href="getContentUrl(scope.row)" target="_blank" v-html="scope.row.title" v-on:click.stop.native></el-link>
      <el-link v-else type="primary" :underline="false" v-on:click="btnTitleClick(scope.row)" v-html="scope.row.title" v-on:click.stop.native></el-link>
      <!-- top -->
      <el-tooltip v-if="scope.row.top" effect="light" content="置顶" placement="top">
        <el-link size="mini" :underline="false" type="danger"><i class="el-icon-top"></i></el-link>
      </el-tooltip>
      <!-- recommend -->
      <el-tooltip v-if="scope.row.recommend" effect="light" content="推荐" placement="top">
        <el-link size="mini" :underline="false" type="danger"><i class="el-icon-star-off"></i></el-link>
      </el-tooltip>
      <!-- hot -->
      <el-tooltip v-if="scope.row.hot" effect="light" content="热点" placement="top">
        <el-link size="mini" :underline="false" type="danger"><i class="el-icon-news"></i></el-link>
      </el-tooltip>
      <!-- color -->
      <el-tooltip v-if="scope.row.color" effect="light" content="醒目" placement="top">
        <el-link size="mini" :underline="false" type="danger"><i class="el-icon-view"></i></el-link>
      </el-tooltip>
      <!-- imageUrl -->
      <el-popover
        v-if="scope.row.imageUrl"
        width="400"
        trigger="hover">
        <el-image :src="scope.row.imageUrl"></el-image>
        <el-link slot="reference" :underline="false">
          <i class="el-icon-picture-outline"></i>
        </el-link>
      </el-popover>
      <!-- video -->
      <el-tooltip v-if="scope.row.videoUrl" effect="light" content="视频" placement="top">
        <el-link :underline="false" :href="scope.row.videoUrl" target="_blank" v-on:click.stop>
          <i class="el-icon-video-play"></i>
        </el-link>
      </el-tooltip>
      <!-- fileUrl -->
      <el-tooltip v-if="scope.row.fileUrl" effect="light" content="附件" placement="top">
        <el-link :underline="false" :href="scope.row.fileUrl" target="_blank" v-on:click.stop>
          <i class="el-icon-document"></i>
        </el-link>
      </el-tooltip>
      <!-- linkUrl -->
      <el-tooltip v-if="scope.row.linkUrl" effect="light" content="外部链接" placement="top">
        <el-link :underline="false" :href="scope.row.linkUrl" target="_blank" v-on:click.stop.native title="外部链接">
          <i class="fa fa-external-link"></i>
        </el-link>
      </el-tooltip>
      <!-- referenceId -->
      <el-tooltip v-if="scope.row.referenceId > 0 && scope.row.sourceId > 0" effect="light" content="引用" placement="top">
        <i class="el-icon-connection"></i>
      </el-tooltip>
    </template>
  </el-table-column>

  <el-table-column
    v-for="column in columns"
    v-if="column.isList"
    :key="column.attributeName"
    :column-key="column.attributeName"
    :label="column.displayName"
    :width="column.width"
    show-overflow-tooltip
    resizable>
    <template slot-scope="scope">

      <!-- ChannelId -->
      <template v-if="column.attributeName === 'ChannelId'">
        {{scope.row.channelName}}
      </template>

      <!-- GroupNames -->
      <template v-else-if="column.attributeName === 'GroupNames'">
        <template v-if="scope.row.groupNames && groupNames" v-for="groupName in scope.row.groupNames">
          <el-tag v-if="groupNames.indexOf(groupName) !== -1" :key="groupName" size="mini" type="info">
            {{ groupName }}
          </el-tag>
        </template>
      </template>

      <!-- TagNames -->
      <template v-else-if="column.attributeName === 'TagNames'">
        <template v-if="scope.row.tagNames && tagNames" v-for="tagName in scope.row.tagNames">
          <el-tag v-if="tagNames.indexOf(tagName) !== -1" :key="tagName" size="mini" type="info">
            {{ tagName }}
          </el-tag>
        </template>
      </template>

      <!-- ImageUrl -->
      <template v-else-if="column.attributeName === 'ImageUrl'">
        <el-link :underline="false" :href="scope.row.imageUrl" target="_blank" v-on:click.stop.native>
          <el-image v-if="scope.row.imageUrl"  :src="scope.row.imageUrl" style="max-width: 100px; max-height: 100px"></el-image>
        </el-link>
      </template>

      <!-- LinkUrl -->
      <template v-else-if="column.attributeName === 'LinkUrl'">
        <el-link v-if="scope.row.linkUrl" :underline="false" type="primary" :href="scope.row.linkUrl" target="_blank" v-on:click.stop.native>{{scope.row.linkUrl}}</el-link>
      </template>

      <!-- AdminId -->
      <template v-else-if="column.attributeName === 'AdminId'">
        <el-link v-if="scope.row.adminId" :underline="false" type="primary" v-on:click.stop.native="btnAdminClick(scope.row.adminId)">{{scope.row.adminName}}</el-link>
      </template>

      <!-- LastEditAdminId -->
      <template v-else-if="column.attributeName === 'LastEditAdminId'">
        <el-link v-if="scope.row.lastEditAdminId" :underline="false" type="primary" v-on:click.stop.native="btnAdminClick(scope.row.lastEditAdminId)">{{scope.row.lastEditAdminName}}</el-link>
      </template>

      <!-- UserId -->
      <template v-else-if="column.attributeName === 'UserId'">
        <el-link v-if="scope.row.userId" :underline="false" type="primary" v-on:click.stop.native="btnUserClick(scope.row.userId)">{{scope.row.userName}}</el-link>
      </template>

      <!-- CheckAdminId -->
      <template v-else-if="column.attributeName === 'CheckAdminId'">
        <el-link v-if="scope.row.checkAdminId" :underline="false" type="primary" v-on:click.stop.native="btnAdminClick(scope.row.checkAdminId)">{{scope.row.checkAdminName}}</el-link>
      </template>

      <!-- SourceId -->
      <template v-else-if="column.attributeName === 'SourceId'">
        {{scope.row.sourceName}}
      </template>

      <!-- TemplateId -->
      <template v-else-if="column.attributeName === 'TemplateId'">
        {{scope.row.templateName || '<默认>'}}
      </template>

      <!-- Others -->
      <template v-else>
        <span v-html="scope.row.getEntityValue(column.attributeName)"></span>
      </template>

    </template>
  </el-table-column>

  <el-table-column
    fixed="right"
    align="center"
    width="70"
    show-overflow-tooltip
    label="状态">
    <template slot-scope="scope">
      <el-link :disabled="!permissions.isEdit" size="mini" :underline="false" v-on:click.stop.native="btnContentStateClick(scope.row)" :type="(scope.row.checked ? 'primary' : 'danger')">
        {{ scope.row.state }}
      </el-link>
    </template>
  </el-table-column>

  <el-table-column
    v-if="menus"
    v-for="menu in menus"
    :key="menu.id"
    fixed="right"
    align="center"
    :width="menu.text.length * 20"
    show-overflow-tooltip>
    <template slot-scope="scope">
      <el-link v-if="menus" :disabled="!permissions.isEdit" size="mini" type="primary" :underline="false" v-on:click.stop.native="btnMenuClick(menu, scope.row)">
        <i v-if="menu.iconClass" :class="menu.iconClass"></i>
        {{ menu.text }}
      </el-link>
    </template>
  </el-table-column>

  <el-table-column
    fixed="right"
    align="center"
    width="60">
    <template slot-scope="scope">
      <el-link :disabled="!permissions.isEdit" size="mini" :underline="false" v-on:click.stop.native="btnEditClick(scope.row)" type="primary">编辑</el-link>
    </template>
  </el-table-column>
</el-table>

<el-row style="margin-top: 7px;">
  <el-col :span="24" align="center">
    <el-pagination
      size="mini"
      background
      v-on:current-change="handleCurrentChange"
      :current-page="page"
      :page-size="pageSize"
      layout="total, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </el-col>
</el-row>